<template>
	<view class="m-list">
		<!-- 新闻列表 type==1-->
		<view v-if="type==1" class="newsBox flex mt-16 ptb-20 plr-24"
			@click="Jump('/pages/news/newsDetail/newsDetail'+`?id=${itemObj.id}`)">
			<view class="_left flex-1">
				<view class="_top flex-column">
					<text class="fs30 otp2 pb-8">{{itemObj.title}}</text>
					<text class="fs26 otp3 text-grey"
						v-if="itemObj.content_abstract">{{itemObj.content_abstract}}</text>
				</view>
				<view class="_buttom pt-4">
					<m-image2  v-if="itemObj.author&&itemObj.author.avatar" :src="itemObj.author.avatar" />
					<text class="fs21 text-grey pr-8"
						v-if="itemObj.author&&itemObj.author.name">来源:{{itemObj.author.name}}</text>
					<text class="fs21 text-grey ">{{itemObj.ctime | getDateDiff}}</text>
				</view>
			</view>
			<m-image class="_right ml-12" v-if="itemObj.picurl" :src="itemObj.picurl.split(',')[0]" :size="[240,156]" radius="8" />
		</view>
		<!-- 行情列表 -->
		<view v-if="type==2" class="flex-between mt-16 ptb-16">
			<view class="_left_2 flex" style="max-width: 300rpx;">
				<text class="mr-20 fs28" style="font-style: italic;">{{itemObj.rank | PrefixZero(2)}}</text>
				<m-image class="mr-20" size="40" :src="itemObj.logo" />
				<view class="flex-column">
					<text class="fs28">{{itemObj.name}}</text>
					<text class="fs21 text-grey otw">{{itemObj.fullname}}</text>
				</view>
			</view>
			<view class="_right_2 flex-1 flex jc-flex-end">
				<view class="flex-column ai-flex-end">
					<text>{{itemObj.current_price}}</text>
					<text class="fs21 text-grey">${{itemObj.current_price_usd}}</text>
				</view>
				<view class="ml-60 flex jc-flex-end" style="width: 150rpx;">
					<text class="fs30"
						:class="[{'red':itemObj.change_percent<0},{'green':itemObj.change_percent>0},{'grey':itemObj.change_percent==0}]">{{itemObj.change_percent | integer(2)}}%</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-list",
		data() {
			return {

			};
		},
		props: {
			type: {
				type: Number,
				default: 1 //  1  资讯列表   2 其他
			},
			itemObj: {
				type: Object,
				default: () => {
					return {}
				},
			},
			height: {
				type: String,
				default: '300rpx'
			},
			radius: {
				default: '16',
				type: String,
			},
		},
		filters: {
			/**
			 * @function  数字前面补0
			 * @param {Number} num  被操作数
			 * @param {Number} n    固定的总位数
			 * @returns 
			 * @example PrefixZero(12,5) → 00012
			 */
			PrefixZero(num, n) {
				return (Array(n).join(0) + num).slice(-n);
			}
		},
		computed: {
			style() {
				const radius = this.radius.split(" ").filter(x => x);
				return {
					borderRadius: radius.map(n => `${n}rpx`).join(' '),
					height: this.height,
				}
			},
		},
	}
</script>

<style lang='scss' scoped>
	.m-ist {}

	.newsBox {
		background-color: var(--bg_block);
		border-radius: 16rpx;

		._left {}

		._right {
			width: 230rpx;
			height: 136rpx;
		}
	}

	.red {
		color: red;
		border-radius: 10rpx;
		background: rgba(205, 42, 70, 0.3);
		width: 100%;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		display: block;
	}

	.grey {
		color: #939393;
		width: 100%;
		height: 58rpx;
		text-align: center;
		display: block;
		line-height: 58rpx;
		background: rgba(137, 137, 137, 0.3);
		border-radius: 10rpx;
	}

	.green {
		/* color: var(--theme); */
		color: #00a8b4;
		width: 100%;
		height: 58rpx;
		text-align: center;
		display: block;
		line-height: 58rpx;
		background: rgba(0, 204, 146, 0.3);
		border-radius: 10rpx;
	}
	.golden{
		color: var(--theme);
		width: 100%;
		height: 58rpx;
		text-align: center;
		display: block;
		line-height: 58rpx;
		background: rgba(177, 177, 43, 0.3);
		border-radius: 10rpx;
	}
</style>
